<template>
	<view class="search_pages">
		<view class="search_box">
			<search @search="toSearch" @clear="clearSearch" :searchIconShow="searchIconShow" :searchValue="listData.search_name" :isFocus="isFocus">
			</search>
			<view class="history_text" :style="historyShow ? '' : 'display:none;'">
				<view class="history">搜索历史</view>
				<uni-icons type="trash" size="18" color="#231916" class="history_icon" @click="removeAll"></uni-icons>
			</view>
			<view class="history_box" :style="historyShow ? '' : 'display:none;'">
				<view class="history_item" v-for="(i, j) in list" :key="j" @click="toSearchRequest(i)">{{ i }}</view>
			</view>
		</view>
		<view class="result_list" :style="historyShow ? 'display:none;' : ''">
			<commodity :list='commodityList' @commodity_click='commodityClick'></commodity>
		</view>
		<view class="no_data" v-if="!historyShow && commodityList.length == 0">
			暂无数据
		</view>
		
	</view>
</template>

<script>
	import search from '../common/components/serch.vue';
	import commodity from '../../index/components/commodity-list.vue'
	import {goodsList} from '../../../api/shopping/shopping.js'
	import {storage} from '../common/js/util.js'
	export default {
		components: {
			search,
			commodity
		},
		data() {
			return {
				list: [],
				searchIconShow: true,
				historyShow: true,
				isFocus: true,
				searchValue: '',
				commodityList: [],
				listData:{
					page:0,
					page_size:20,
					search_name:''
				},
				flag:true
			};
		},
		onLoad() {
			this.getList();
		},
		methods: {
			async goodsList(){
				uni.showLoading({
					title: '加载中',
				})
				this.listData.page++;
				const res = await goodsList({...this.listData});
				if(res){
					if(res.data.length == 0){
						this.flag = false;
					}
					this.commodityList.push(...res.data);
				}else{
					this.listData.page--;
				}
				uni.hideLoading()
			},
			setList() {
				storage.setStorage('history', this.list);
			},
			getList() {
				storage.getStorage('history', (data) => {
					this.list = data.data;
				});
			},
			toSearch(data) {
				let flag = true;
				for (let i of this.list) {
					if (data == i) {
						flag = false;
					}
				}
				if (data == '') {
					uni.showToast({
						title: '请填写搜索内容',
						icon: 'none'
					});
					return false;
				}
				if (data !== '' && flag) {
					this.list.push(data);
					this.setList();
					this.getList();
				}
				this.listData.page = 0;
				this.$set(this.listData,'search_name',data)
				
				// this.listData.search_name = data;
				this.commodityList =[];
				this.commodityList.length = 0;
				this.toSearchRequest();
			},
			removeAll() {
				this.list = [];
				this.list.length = 0;
				this.setList();
				this.getList();
			},
			toSearchRequest(data) {
				this.flag = true;
				this.historyShow = false;
				if (data) {
					this.$set(this.listData,'search_name',data)
				}
				this.goodsList();
			},
			onReachBottom() {
				if(this.flag){
					this.goodsList();
				}
			},
			clearSearch(){
				this.flag = false;
				this.historyShow = true;
				this.listData.page = 0;
				this.listData.search_name = '';
				this.commodityList =[];
				this.commodityList.length = 0;
			},
			commodityClick(data) {
				let url = '/pages/shopping/commodity/detail/index?id=' + encodeURIComponent(data.id)+'&index=1';
				if (data.topic_id) {
					url += '&topic_id=' + data.topic_id
				}
				uni.navigateTo({
					url: url
				})
			},
		}
	};
</script>

<style lang="scss" scoped>
	.search_pages {
		.search_box {
			padding: 24rpx 30rpx;
			background: #fff;

			/* #ifndef MP-WEIXIN */
			margin-top: 82rpx;
			/* #endif */
			position: fixed;
			left: 0;
			top: 0;
			z-index: 99;
		}

		.history_text {
			margin-top: 44rpx;
			font-size: 32rpx;
			color: #0b0b0d;
			line-height: 44rpx;
			display: flex;
			justify-content: space-between;

			.history_icon {
				display: block;
			}
		}

		.history_box {
			color: #5c5c5c;
			font-size: 24rpx;
			display: flex;
			white-space: nowrap;
			flex-wrap: wrap;
			margin-top: 18rpx;

			.history_item {
				font-size: 24rpx;
				height: 48rpx;
				line-height: 48rpx;
				padding: 0 24rpx;
				background: #f0f1f2;
				margin: 0 8rpx 16rpx;
				border-radius: 12px;
			}
		}

		.result_list {
			margin-top: 140rpx;
			// padding: 20rpx;
			background: #f0f1f2;
		}
		.no_data {
			text-align: center;
			font-size: 22rpx;
			color: #CCCCCC;
			line-height: 56rpx;
		}
	}
</style>
